<template>
  <el-dialog title="新增保函" :visible.sync="dialogVisible" width="30%" :append-to-body="true">
    <el-form ref="addForm" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="公司名称" prop="org_name">
        <el-input v-model="form.org_name"></el-input>
      </el-form-item>
      <el-form-item label="项目名称" prop="project_name">
        <el-input v-model="form.project_name"></el-input>
      </el-form-item>
      <el-form-item label="联系人" prop="link_man">
        <el-input v-model="form.link_man"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="link_phone">
        <el-input v-model="form.link_phone"></el-input>
      </el-form-item>
      <el-form-item label="保函类型" prop="type">
        <el-select v-model="form.type" style="width:100%">
          <el-option v-for="item in data" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="保函额度/万元" prop="money">
        <el-input v-model="form.money" type="number"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('addForm')">保存</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import { baseUrl } from "@/config/env";
const urls = {
  save: baseUrl + "/zweixin/fk/bl/add"
};
export default {
  data() {
    return {
      dialogVisible: false,
      data: [
        "投标保函",
        "履约保函",
        "预付款保函",
        "业主支付保函",
        "农民工工资保函",
        "质量保证保函"
      ],
      form: {
        org_name: null,
        project_name: null,
        link_man: null,
        link_phone: null,
        type: null,
        money: null
      },
      rules: {
        org_name: [
          { required: true, message: "请填写公司名称", trigger: "blur" }
        ],
        project_name: [
          { required: true, message: "请填写项目名称", trigger: "blur" }
        ],
        link_man: [
          { required: true, message: "请填写联系人", trigger: "blur" }
        ],
        link_phone: [
          { required: true, message: "请填写联系电话", trigger: "blur" }
        ],
        type: [{ required: true, message: "请选择保函类型", trigger: "blur" }],
        money: [{ required: true, message: "请填写保函额度", trigger: "blur" }]
      }
    };
  },
  components: {},
  methods: {
    show() {
      this.dialogVisible = true;
      if (this.$refs["addForm"]) {
        this.$refs["addForm"].resetFields();
      }
    },
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          axios.post(urls.save, this.form).then(res => {
            this.$message(res.data.result);
            this.dialogVisible = false;
            this.$emit("refresh");
          });
        }
        return false;
      });
    }
  }
};
</script>